<template>
 <div class="homeIndex">
 <el-container>
  <el-header>
    <!-- 头部 -->
    <header-top></header-top>
  </el-header>
  <el-container>
    <el-aside :width="isCollapse?'4rem':'200px'">
      <!-- 左侧菜单 -->
     <left-menu></left-menu>
    </el-aside>
    <!-- 主体部分 -->
    <el-main>
      <router-view/>
    </el-main>
  </el-container>
</el-container>
 </div>
</template>

<script>
import headerTop from '@/components/header'
import leftMenu from '@/components/leftMenu'
import eventBus from "@/eventBus/eventBus"
export default {
  name:'homeIndex',
  components:{
      headerTop,
      leftMenu,
  },
  data() {
    return {
      isCollapse:''
    }
  },
  created() {
     eventBus.$on('isShowCollapse',(message)=>{
        //一些操作，message就是从header组件传过来的值
        console.log(message)
        this.isCollapse = message
    })
  }
}
</script>

<style lang="less" scoped>
 .homeIndex{
   height: 100%;
   box-sizing: border-box;
   position: relative;
   .is-vertical{
     height: 100%;
   }
.el-header, .el-footer {
    padding: 0;
     background: #00a65a;
     height: 60px;
  }
 }
</style>
